<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jsx小练习</title>
</head>
<style>
 
</style>
<body>
  <!-- 容器 -->
  <div id="test"></div>

  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">
    // 何为表达式
      // 一定注意区分【js语句(代码)】与【js表达式】
        // 1、表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
          // 下面这些都是表达式：
            // (1). a
            // (2). a+b
            // (3). demo(1)
            // (4). arr.map() 
            // (5). function test() {}
        // 2、语句(代码)：
          // 下面这些都是语句(代码)：
            // (1). if() {}
            // (2). for() {}
            // (3). switch() { case: xxx }

    // 模拟数据
    let data = ['Angular', 'React', 'Vue']
    let data2 = [<li>Angular</li>, <li>React</li>, <li>Vue</li>]
    const VDOM = (
      <div>
        <h1>前端js框架列表</h1>
        <ul>
          /* <li>Angular</li>
          <li>React</li>
          <li>Vue</li>
          <br/>
          {data}
          <br/>
          {data2}
          <br/> */
          {
            data.map((item, index) => {
              return <li key={ index }>{ item }</li>
            })
          }
        </ul>  
      </div>
    )

    ReactDOM.render(VDOM, document.getElementById('test'))
  </script>
</body>
</html>